

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <select name="" id="">
        <option value="0">请选择销量范围</option>
        <option value="1">&lt100</option>
        <option value="2">100~500</option>
        <option value="3">&gt500</option>
    </select>
    <ul>
        <li>牛客logo马克杯</li>
        <li>无盖星空杯</li>
        <li>老式茶杯</li>
        <li>欧式印花杯</li>
    </ul>

    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        
        必知必会
        
        var cups = [
            { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
            { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
            { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
            { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
        ]
        var select = document.querySelector('select');
        var ul = document.querySelector('ul');

        var str = '';
        select.onchange = function () {
            str = '';
            let val = this.value;
            showList(val);
        }
        function showList(val) {
            switch (val) {
                case '1':
                    var arr = cups.filter((ele) => { return ele.sales < 100; }); break;
                case '2':
                    var arr = cups.filter((ele) => { return ele.sales >= 100 && ele.sales <= 500; }); break;
                case '3':
                    var arr = cups.filter((ele) => { return ele.sales > 500; }); break;
            }
            for (let i = 0; i < arr.length; i++) {
                str += `<li>${arr[i].name}</li>`
            }
            ul.innerHTML = str;
        }
    </xmp>



    <script>
        var cups = [
            { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
            { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
            { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
            { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
        ]
        var select = document.querySelector('select');
        var ul = document.querySelector('ul');

        var str = '';
        select.onchange = function () {
            str = '';
            let val = this.value;
            showList(val);
        }
        function showList(val) {
            switch (val) {
                case '1':
                    var arr = cups.filter((ele) => { return ele.sales < 100; }); break;
                case '2':
                    var arr = cups.filter((ele) => { return ele.sales >= 100 && ele.sales <= 500; }); break;
                case '3':
                    var arr = cups.filter((ele) => { return ele.sales > 500; }); break;
            }
            for (let i = 0; i < arr.length; i++) {
                str += `<li>${arr[i].name}</li>`
            }
            ul.innerHTML = str;
        }
    </script>
</body>

</html>



